<template>
  <div class="com-container">
    <!--  TODO 查询表单-->
    <el-form :inline="true" :model="selectModel" class="demo-form-inline">

      <el-form-item label="入学年份">
        <el-select v-model="selectModel.admissionyear" placeholder="入学年份">
          <el-option label="2019" value="2019"></el-option>
          <el-option label="2018" value="2018"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学院">
        <el-select v-model="selectModel.academy" placeholder="学院">
          <el-option label="信息技术学院" value="信息技术学院"></el-option>
          <el-option label="化学化工学院" value="化学化工学院"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="">
        <el-input v-model="selectModel.number" placeholder="学号"></el-input>
      </el-form-item>

      <el-form-item label="">
        <el-input v-model="selectModel.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input v-model="selectModel.major" placeholder="专业"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSelect">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!--  TODO 添加数据嵌套表单对话框-->
    <el-dialog
        title="添加学生信息"
        :visible.sync="dialogVisible"
        width="60%"
        center
    >
      <el-form ref="addForm" :model="stuInfo" :rules="rules" label-width="auto" :inline="true">
        <el-form-item label="学号" prop="number">
          <el-input v-model.number="stuInfo.number"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="stuInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model="stuInfo.sex"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="stuInfo.age"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthdate">
          <el-input v-model="stuInfo.birthdate"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-input v-model="stuInfo.major"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="aclass">
          <el-input v-model="stuInfo.aclass"></el-input>
        </el-form-item>
        <el-form-item label="民族" prop="nation">
          <el-input v-model="stuInfo.nation"></el-input>
        </el-form-item>
        <el-form-item label="政治面貌" prop="policalstatus">
          <el-input v-model="stuInfo.policalstatus"></el-input>
        </el-form-item>
        <el-form-item label="院系" prop="academy">
          <el-input v-model="stuInfo.academy"></el-input>
        </el-form-item>
        <el-form-item label="省份" prop="province">
          <el-input v-model="stuInfo.province"></el-input>
        </el-form-item>
        <el-form-item label="家庭住址" prop="address">
          <el-input v-model="stuInfo.address"></el-input>
        </el-form-item>
        <el-form-item label="毕业高中" prop="graducatedschool">
          <el-input v-model="stuInfo.graducatedschool"></el-input>
        </el-form-item>
        <el-form-item label="入学年份" prop="admissionyear">
          <el-input v-model="stuInfo.admissionyear"></el-input>
        </el-form-item>
        <el-form-item label="报到日期" prop="admissiondate">
          <el-input v-model="stuInfo.admissiondate"></el-input>
        </el-form-item>
        <el-form-item label="高考分数" prop="gkscore">
          <el-input v-model="stuInfo.gkscore"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="stuInfo.phone"></el-input>
        </el-form-item>
        <el-form-item label="qq" prop="qq">
          <el-input v-model="stuInfo.qq"></el-input>
        </el-form-item>
        <el-form-item label="微信" prop="wechat">
          <el-input v-model="stuInfo.wechat"></el-input>
        </el-form-item>
        <el-form-item label="是否签到" prop="status">
          <el-input v-model="stuInfo.status"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="stuInfo.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="handleAdd">提交</el-button>
  </span>
    </el-dialog>
    <!--  TODO 修改编辑表单对话框-->
    <el-dialog
        title="编辑学生信息"
        :visible.sync="dialogEditVisible"
        width="60%"
        center
    >
      <el-form ref="editForm" :model="stuInfo" :rules="rules" label-width="auto" :inline="true">
        <el-form-item label="学号" prop="number">
          <el-input v-model.number="stuInfo.number"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="stuInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model="stuInfo.sex"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="stuInfo.age"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthdate">
          <el-input v-model="stuInfo.birthdate"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-input v-model="stuInfo.major"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="aclass">
          <el-input v-model="stuInfo.aclass"></el-input>
        </el-form-item>
        <el-form-item label="民族" prop="nation">
          <el-input v-model="stuInfo.nation"></el-input>
        </el-form-item>
        <el-form-item label="政治面貌" prop="policalstatus">
          <el-input v-model="stuInfo.policalstatus"></el-input>
        </el-form-item>
        <el-form-item label="院系" prop="academy">
          <el-input v-model="stuInfo.academy"></el-input>
        </el-form-item>
        <el-form-item label="省份" prop="province">
          <el-input v-model="stuInfo.province"></el-input>
        </el-form-item>
        <el-form-item label="家庭住址" prop="address">
          <el-input v-model="stuInfo.address"></el-input>
        </el-form-item>
        <el-form-item label="毕业高中" prop="graducatedschool">
          <el-input v-model="stuInfo.graducatedschool"></el-input>
        </el-form-item>
        <el-form-item label="入学年份" prop="admissionyear">
          <el-input v-model="stuInfo.admissionyear"></el-input>
        </el-form-item>
        <el-form-item label="报到日期" prop="admissiondate">
          <el-input v-model="stuInfo.admissiondate"></el-input>
        </el-form-item>
        <el-form-item label="高考分数" prop="gkscore">
          <el-input v-model="stuInfo.gkscore"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="stuInfo.phone"></el-input>
        </el-form-item>
        <el-form-item label="qq" prop="qq">
          <el-input v-model="stuInfo.qq"></el-input>
        </el-form-item>
        <el-form-item label="微信" prop="wechat">
          <el-input v-model="stuInfo.wechat"></el-input>
        </el-form-item>
        <el-form-item label="是否签到" prop="status">
          <el-input v-model="stuInfo.status"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="stuInfo.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogEditVisible = false">取消</el-button>
    <el-button type="primary" @click="handleEdit">确认修改</el-button>
  </span>
    </el-dialog>
    <!--TODO 批量删除及新增按钮-->
    <el-row style="margin-bottom: 5px">

      <el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
      <el-button type="primary" plain @click="handleAddButtonClick">新增</el-button>
      <el-upload action="http://localhost:9090/stuInfos/import"
                 accept=".xlsx"
                 :on-success="handleExcelImportSuccess"
                 :show-file-list="false"
                 style="display: inline-block;margin-left: 7px;margin-right: 7px"
      >
        <el-button type="primary" icon="el-icon-top">导入</el-button>
      </el-upload>
      <el-button type="primary" @click="handleExp" icon="el-icon-bottom">导出</el-button>

    </el-row>
    <!-- TODO table数据-->
    <el-table :data="tableData"
              style="width: 100%"
              stripe
              border
              max-height="500"
              @selection-change="handleSelectionChange"
    >
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="学号">
              <span>{{ props.row.number }}</span>
            </el-form-item>
            <el-form-item label="姓名">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="性别">
              <span>{{ props.row.sex }}</span>
            </el-form-item>
            <el-form-item label="年龄">
              <span>{{ props.row.age }}</span>
            </el-form-item>
            <el-form-item label="专业">
              <span>{{ props.row.major }}</span>
            </el-form-item>
            <el-form-item label="班级">
              <span>{{ props.row.aclass }}</span>
            </el-form-item>
            <el-form-item label="民族">
              <span>{{ props.row.nation }}</span>
            </el-form-item>
            <el-form-item label="政治面貌">
              <span>{{ props.row.policalstatus }}</span>
            </el-form-item>
            <el-form-item label="家庭住址">
              <span>{{ props.row.address }}</span>
            </el-form-item>

            <el-form-item label="出生日期">
              <span>{{ props.row.birthdate }}</span>
            </el-form-item>
            <el-form-item label="报到时间">
              <span>{{ props.row.admissiondate }}</span>
            </el-form-item>
            <el-form-item label="学院">
              <span>{{ props.row.academy }}</span>
            </el-form-item>
            <el-form-item label="毕业高中">
              <span>{{ props.row.graducatedschool }}</span>
            </el-form-item>
            <el-form-item label="高考分数">
              <span>{{ props.row.gkscore }}</span>
            </el-form-item>

            <el-form-item label="电话号码">
              <span>{{ props.row.phone }}</span>
            </el-form-item>
            <el-form-item label="qq">
              <span>{{ props.row.qq }}</span>
            </el-form-item>
            <el-form-item label="微信">
              <span>{{ props.row.wechat }}</span>
            </el-form-item>
            <el-form-item label="签到状态">
              <span>{{ props.row.status }}</span>
            </el-form-item>
            <el-form-item label="密码">
              <span>{{ props.row.password }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column
          prop="number"
          label="学号"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="age"
          label="年龄"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="major"
          label="专业"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="nation"
          label="汉族"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="policalstatus"
          label="政治面貌"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="address"
          label="家庭住址"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="birthdate"
          label="出生日期"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="status"
          label="签到状态"
          align="center"
      >
      </el-table-column>
      <el-table-column
          label="操作"
          width="142px"
          align="center"
      >
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEditButtonClick(scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDeleteButtonClick(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>
    <!--分页工具条-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "StuInfo",
  data() {
    // 学号验证
    var checkNumber = (rule, value, callback) => {
      const a = /^\d{9}$/
      if (!a.test(value)) {
        return callback(new Error("学号只能为9位数字"));
      } else {
        return callback()
      }
    }
    // 姓名验证
    var checkName = (rule, value, callback) => {
      const b = /^[u4e00-u9fa5]$/
      if (!b.test(value)) {
        return callback(new Error("请输入中文名"));
      } else {
        return callback()
      }
    }
    // 性别验证
    var checkSex = (rule, value, callback) => {
      const c = /^['男','女']{1}$/
      if (!c.test(value)) {
        return callback(new Error("请输入正确的性别"));
      } else {
        return callback()
      }
    }
    // TODO 年龄验证
    var checkAge = (rule, value, callback) => {
      const d = /^\+?[1-9][0-9]*$/
      if (!d.test(value)) {
        return callback(new Error("请输入正确的年龄格式"));
      } else if (value < 6) {
        return callback(new Error("建议去隔壁幼儿园亲"));
      } else if (value > 120) {
        return callback(new Error("年纪是不是太大了捏"));
      }
      else {
        return callback()
      }
    }
    // 出生日期验证
    var checkBirthdate = (rule, value, callback) => {
      if (value == null || String(value).trim() === "") {
        return callback()
      }
      const e = /^([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8])))$/
      if (!e.test(value)) {
        return callback(new Error("仅支持YYYY-MM-DD的日期格式"));
      } else {
        return callback()
      }
    }
    // 专业验证
    var checkMajor = (rule, value, callback) => {
      const e = /^[\\u4e00-\\u9fa5]{0,}$/
      if (!e.test(value)) {
        return callback(new Error("专业请用中文书写"));
      } else {
        return callback()
      }
    }
    // 班级验证
    // 民族验证
    // 政治面貌验证
    // 院系验证
    // 省份验证
    var checkProvince = (rule, value, callback) => {
      const e = /^.*[^'省']$/
      if (!e.test(value)) {
        return callback(new Error("省份后不必带'省'"));
      } else {
        return callback()
      }
    }
    // 家庭住址验证
    // 毕业高中验证
    // 入学年份验证
    var checkAdmissionyear = (rule, value, callback) => {
      const e = /^\d{4}$/
      if (!e.test(value)) {
        return callback(new Error("入学年份格式错误"));
      } else {
        return callback()
      }
    }
    // 报到日期验证
    // 高考分数验证
    var checkGkScore = (rule, value, callback) => {
      if (value == null || String(value).trim() === "") {
        return callback()
      }
      const d = /^\d{3}$/
      if (!d.test(value)) {
        return callback(new Error("请输入正确的高考分数格式"));
      } else {
        return callback()
      }
    }
    // 电话验证
    var checkPhone = (rule, value, callback) => {
      if (value == null || String(value).trim() === "") {
        return callback()
      }
      const d = /^\d{11}$/
      if (!d.test(value)) {
        return callback(new Error("请输入正确的电话号码格式"));
      } else {
        return callback()
      }
    }
    // qq验证
    var checkQq = (rule, value, callback) => {
      if (value == null || String(value).trim() === "") {
        return callback()
      }
      const d = /^[0-9]{5,}$/
      if (!d.test(value)) {
        return callback(new Error("请输入正确的电话号码格式"));
      } else {
        return callback()
      }
    }
    // 微信验证
    var checkWeChat = (rule, value, callback) => {
      if (value == null || String(value).trim() === "") {
        return callback()
      }
      const d = /^\w{0,}$/
      if (!d.test(value)) {
        return callback(new Error("请输入正确的微信号格式"));
      } else {
        return callback()
      }
    }
    // 是否签到验证
    var checkStatus = (rule, value, callback) => {
      if (value == null || String(value).trim() === "") {
        return callback()
      }
      const d = /^['是','否']$/
      if (!d.test(value)) {
        return callback(new Error("请输入是或否"));
      } else {
        return callback()
      }
    }
    // 密码验证
    var checkPassword = (rule, value, callback) => {
      const d = /^[A-Za-z0-9]+$/
      if (!d.test(value)) {
        return callback(new Error("密码是4-10位的英文或数字"));
      } else {
        return callback()
      }
    }

    return {
      stuInfo: {},
      tableData: [],
      selectModel: {
        admissionyear: '2019',
        academy: '信息技术学院',
        number: '',
        name: '',
        major: ''
      },
      // 表单格式设置相关数据绑定
      dialogVisible: false,
      dialogEditVisible: false,
      pageSize: 5,
      currentPage: 1,
      totalCount: 1,
      multipleSelection: [],
      rules: {
        number: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {validator: checkNumber, trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {min: 2, max: 10, message: '检测到异常姓名长度', trigger: 'blur'},
        ],
        sex: [
          {required: true, message: '请输入性别', trigger: 'blur'},
          {validator: checkSex, trigger: 'blur'}
        ],
        age: [
          {required: true, message: '请输入年龄', trigger: 'blur'},
          {validator: checkAge, trigger: 'blur'}
        ],
        birthdate: [
          {validator: checkBirthdate, trigger: 'blur'}
        ],
        major: [
          {required: true, message: '请输入专业', trigger: 'blur'},
        ],
        aclass: [
          {required: true, message: '请输入班级', trigger: 'blur'},
        ],
        academy: [
          {required: true, message: '请输入院系', trigger: 'blur'},
        ],
        province: [
          {required: true, message: '请输入省份', trigger: 'blur'},
          {validator: checkProvince, trigger: 'blur'}
        ],
        admissionyear: [
          {required: true, message: '请输入省份', trigger: 'blur'},
          {validator: checkAdmissionyear, trigger: 'blur'}
        ],
        gkscore: [
          {validator: checkGkScore, trigger: 'blur'}
        ],
        phone: [
          {validator: checkPhone, trigger: 'blur'}
        ],
        qq: [
          {validator: checkQq, trigger: 'blur'}
        ],
        wechat: [
          {validator: checkWeChat, trigger: 'blur'}
        ],
        status: [
          {required: true, message: '请输入签到状态', trigger: 'blur'},
          {validator: checkStatus, trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {validator: checkPassword, trigger: 'blur'}
        ]
      }
    };
  },
  created() {
    this.selectByPageAndCondition();
  },

  methods: {
    handleExcelImportSuccess() {
      this.$message.success("文件导入成功")
      this.selectByPageAndCondition()
    },
    handleExp() {
      window.open("http://localhost:9090/stuInfos/export", "_blank")
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleAddButtonClick() {
      this.stuInfo = {}
      this.dialogVisible = true
    },
    handleEditButtonClick(row) {
      this.request.get("/stuInfos/" + row.id).then(res => {
        if (res.code == 20041) {
          this.stuInfo = res.data;
          this.dialogEditVisible = true;
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    resetStuInfo() {
      this.stuInfo = {}
    },
    handleSelect() {
      this.currentPage = 1
      this.selectByPageAndCondition()
    },
    handleReset() {
      this.selectModel.major = ''
      this.selectModel.number = ''
      this.selectModel.name = ''
    },

    handleDeleteButtonClick(row) {
      this.$confirm("此操作永久删除当前数据，是否继续？", "警告", {
        type: 'warning'
      }).then(() => {
        this.request.delete("/stuInfos/" + row.id).then(res => {
          if (res.code == 20021) {
            this.$message.success(res.msg)
          } else if (res.code == 20020) {
            this.$message.error(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        }).finally(() => {
          this.selectByPageAndCondition()
        })
      }).catch(() => {
        this.$message.info("已取消删除")
      })
    },
    handleEdit() {
      this.$refs['editForm'].validate((valid=>{
        if(valid) {
          this.request.put("/stuInfos", this.stuInfo).then(res => {
            if (res.code == 20031) {
              this.$message.success(res.msg)
              this.dialogEditVisible = false
            } else if (res.code == 20030) {
              this.$message.error(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          }).finally(() => {
            this.selectByPageAndCondition()
          })
        } else {
          return false
        }

      }))

    },
    handleAdd() {
      this.$refs['addForm'].validate(valid => {
        if (valid) {
          this.request.post("/stuInfos", this.stuInfo).then(res => {
            if (res.code == 20011) {
              this.dialogVisible = false;
              this.$message.success("添加成功");
            } else if (res.code == 20010) {
              this.$message.error("添加失败");
            } else {
              // 此种情况下为系统错误或者运行异常,将返回异常返回的msg
              this.$message.error(res.msg);
            }
          }).finally(() => {
            this.selectByPageAndCondition()
          })
        } else {
          return false
        }
      })
    },
    selectByPageAndCondition() {
      this.request.get("/stuInfos", {
        params: {
          pageSize: this.pageSize,
          currentPage: this.currentPage,

          admissionyear: this.selectModel.admissionyear,
          academy: this.selectModel.academy,
          number: this.selectModel.number,
          name: this.selectModel.name,
          major: this.selectModel.major
        }
      }).then(res => {
        this.tableData = res.data.stuInfos
        this.totalCount = res.data.totalCount
      })
    },
    deleteByIds() {
      this.$confirm("此操作永久删除当前数据，是否继续？", "警告", {
        type: 'warning'
      }).then(() => {
        //封装id数组
        let ids = this.multipleSelection.map(v => v.id)
        this.request.post("/stuInfos/batch", ids).then(res => {
          if (res.code == 20021) {
            this.$message.success(res.msg)
          } else if (res.code == 20020) {
            this.$message.error(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        }).finally(() => {
          this.selectByPageAndCondition()
        })
      }).catch(() => {
        this.$message.info("已取消删除")
      })
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.selectByPageAndCondition();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.selectByPageAndCondition();
    }
  },
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 25%;
}
</style>